<template>
	<view class="tarbar">
		<view v-for='(item,index) in datas' @tap="tabClick(index,item.urls,item.id)" :key="index">
			<u-icon :color="item.color" :name="item.icon" size="50"></u-icon>
			<div v-if="item.id==2" style="position: relative;">
				<u-badge type="error" :count="vuex_cartList.length" style="position: absolute;top:-80rpx;right:-25rpx;"></u-badge>
			</div>

			<view :style="{color:totarBar.id == item.id ?'#000':''}">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["totarBar"], //从父组件传来的值 来控制点击当前的颜色
		data() {
			return {
				datas: [{
						urls: '/pages/btdm/index/index/home',
						icon: 'home',
						name: '首页',
						id: 0,
					},
					{
						urls: '/pages/btdm/index/order/order',
						icon: 'order',
						name: '订货',
						id: 1,
					},
					{
						urls: '/pages/btdm/index/cart/cart',
						icon: 'shopping-cart',
						name: '购物车',
						id: 2,
					},
					{
						urls: '/pages/btdm/index/user/user',
						icon: 'account',
						name: '我的',
						id: 3,
					},
				],
			}
		},
		created() {
			//用来控制是显示当前页面的tarBar图标变亮
			if (this.totarBar.id == 3) {

				this.$set(this.datas[3], 'color', this.totarBar.color)
				// console.log(this.totarBar.color)
			}
			if (this.totarBar.id == 2) {
				this.$set(this.datas[2], 'color', this.totarBar.color)
				// console.log(this.totarBar)
			}
			if (this.totarBar.id == 1) {
				this.$set(this.datas[1], 'color', this.totarBar.color)
				// console.log(this.totarBar) 
			}
			if (this.totarBar.id == 0) {
				this.$set(this.datas[0], 'color', this.totarBar.color)
				// console.log(this.totarBar.color)
			}

		},
		methods: {
			tabClick(i, urls, id) {
				uni.reLaunch({
					url: urls
				});
				this.$set(this.datas[id], 'color', this.totarBar.color);
				// console.log(this.datas);

			}
		}
	}
</script>

<style scoped>
	.tarbar {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 28rpx;
		color: #999999;
	}

	.tarbar view {
		text-align: center;
		margin-top: 1%;
	}
</style>